<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
			}
			#div2{
				width: 300px;
				height: 300px;
				background-color: #DEB887;
			}
		</style>
	</head>
	<body>
		<button type="button" id="but1" onclick="but();">按钮1</button>
		<button type="button" id="but2">按钮2</button>
		<button type="button" id="but3">按钮3</button>
		<button type="button" id="but4">按钮4</button>
		<button type="button" id="but5" onclick="addjtq();">为按钮4添加监听器</button>
		<button type="button" id="but6" onclick="movejtq();">移除按钮4的监听器</button>
		<div id="div1" onclick="div1();"> </div>
		
		
		<div id="div2" onmouseenter="enter();" ></div>
		<button type="button" id="div2add" onclick="adddiv2();">添加div2移动监听器</button>
		<button type="button" id="div2move" onclick="movediv2();">移除div2移动监听器</button>
	<!-- 	
		// 用户名输入框，
		// 密码输入框，
		// 提交按钮 --><br><br><br>
		用户名：<input type="text" name="" id="name" value="" onfocus="namee();"  onblur="namee2();"/><br>
		密码：<input type="password" name="" id="pwd" onfocus="pwd1();" onblur="pwd2();"/><br>
		<button type="button" onclick="tt();">提交</button>
	</body>
	<script type="text/javascript">
	<!-- 1.按钮和DIV的单击事件（三种绑定方式） -->
	//按钮
		//1.在标签内绑定函数按钮1第一种绑定方式
		function but(){
			console.log('你点击了按钮')
		}
		//2.1.找到该元素按钮1第二种绑定方式
		document.getElementById('but2').onclick=but
		//2.2.
		document.getElementById('but3').onclick=function(){
			console.log('你点击了按钮3')
		}
		//3.监听器
		function addjtq(){
			// OK的    
			document.getElementById('but4').addEventListener('click',but)
			// OK的
			// document.getElementById('but4').addEventListener('click',function(){
			// 	console.log('成功添加监听器,你点击了按钮4')
			// })
		}
		function movejtq(){
			document.getElementById('but4').removeEventListener('click',but)
			
			// no  document.getElementById('but4').removeBehavior('click',function(){
			// 	console.log('成功删除监听器')
			// })
		}
	//div1
		//1
		function div1(){
			alert('这是一个矩形')
			console.log('这是一个肉色矩形')
		}
		//2.1
		document.getElementById('div1').onclick=div1
		//2.2
		document.getElementById('div1').onclick=function(){
			console.log('这是矩形');
		}
		
	<!-- 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式） -->	
	//第一种
	function enter(){
		console.log('进入矩形')
	}
	//第二种
	function leave(){
		console.log('离开矩形')
	}
	document.getElementById('div2').onmouseleave=leave
	
	//第三种(第四题)<!--
	//4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
	function move(){
		console.log('在矩形里移动')
	}
	function adddiv2(){
		document.getElementById('div2').addEventListener('mousemove',move)
	}
	function movediv2(){
		document.getElementById('div2').removeEventListener('mousemove',move)
	}
	// <!-- 3.登入页面
	// 用户名输入框，
	// 密码输入框，
	// 提交按钮 
	
	// 任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称 
				function namee(){
					console.log('用户在输入名称')
				}
	        <!-- 3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名 -->
				function namee2(){
					
					if(document.getElementById('name').value == ''){
						alert('没有输入用户名')
					}
				}
	        <!-- 3.3  密码框获取焦点事件，控制台输出：用户在输入密码 -->
				function pwd1(){
					console.log('用户在输入密码')
				}
	        <!-- 3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码 -->
				function pwd2(){
					
					if(document.getElementById('pwd').value == ''){
						alert('没有输入密码')
					}
				}
	        <!-- 3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’； -->
	        <!-- 密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’ -->
				function tt(){
					if(document.getElementById('name').value == '' && document.getElementById('pwd').value == '')
					{
						alert('用户名和密码为空')
					}else if(document.getElementById('name').value == '' ){
						alert('用户名为空')
					}else if(document.getElementById('pwd').value == ''){
						alert('密码为空')
					}else{
						alert('提交成功！')
					}
					
				}
	</script>
</html>
